<template>
  <div class="container">
    <div class="contl">
      <div>某美国团队管理者</div>
    </div>

    <div class="contr">
      <div class="allitem">
        <div class="item" v-for="(item,index) in 1" :key="index">
          <img src="@/assets/img/user.jpg" alt="">
          <div>
            <p>某文档翻译员工<span>10 : 00 AM</span></p>
            <h6>属于非法收费噶上课就，飞回属于国吧。飞回去国吧。就啊是冬瓜是否大手大脚卡还是把 ，将去和服务规范不去我就会放弃位，于高峰期无法清谈误国吧。就啊是冬瓜是否大手大脚卡还是把 ，将红头文件不合格吉萨度噶舍不得你。</h6>
          </div>
        </div>
      </div>

      <div class="fonter">
        <div>
          <input type="text">
          <p>发送</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {

    }
  },
  store,
  mounted () {
    store.commit('changeactive', 3)
  },
}
</script>

<style lang='scss' scoped>
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    .contl{
      width: 160px;
      margin: 0 20px;
      div{
        width: 160px;
        height: 32px;
        background: #F0F0F0;
        color: #333;
        line-height: 32px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
    .contr{
      width: 50%;
      height: 100%;
      position: relative;
      .fonter{
        width: 100%;
        height: 42px;
        position: absolute;
        background:rgba(255,255,255,1);
        bottom: 10px;
        left: 0;
        box-sizing: border-box;
        > div {
          width: calc(100% - 2px);
          height: 32px;
          background: rgba(255, 255, 255, 1);
          border: 0.5px solid rgba(181, 181, 181, 1);
          border-radius: 5px;
          position: relative;
          display: flex;
          align-items: center;
          p {
            margin-left: auto;
            padding: 0px 20px;
            border-radius: 5px;
            font-size: 12px;
            color: #fff;
            height: 24px;
            line-height: 24px;
            margin-right: 2px;
            cursor: pointer;
            background: #56aff7;
          }
          input {
            width: calc(100% - 84px);
            padding-left: 6px;
            border: none;
            outline: none;
            color: #515151;
          }
        }
      }
      .allitem{
        height: calc(100% - 55px);
        overflow-y: auto;
        .item {
          width: 100%;
          min-height: 80px;
          margin-top: 20px;
          display: flex;
          img {
            width: 40px;
            height: 40px;
            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.13);
            margin-left: 5px;
            display: block;
          }
          > div {
            margin-left: 10px;
            width: calc(100% - 55px);
            p {
              margin-top: 4px;
              font-size: 12px;
              color: #333;
              display: flex;
              align-items: flex-end;
              span {
                margin-left: 15px;
                font-size: 10px;
              }
            }
            h6 {
              margin-top: 10px;
              line-height: 20px;
              font-size: 12px;
              color: #515151;
            }
          }
        }
        &::-webkit-scrollbar {
          width: 10px;     
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background: #535353;
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 10px;
          background: #EDEDED;
        }
      }
    }
  }
</style>